<script setup lang="ts">
  import { computed } from 'vue';
  type CoilCardProps = {
    title: string;
    left?: string;
    width?: string;
    height?: string;
  };

  const props: CoilCardProps = withDefaults(defineProps<CoilCardProps>(), {
    width: '100%',
    height: '100%',
  });

  const style = computed(() => `width:${props.width};height:${props.height}`);
</script>
<template>
  <div class="container_bg" :style="style">
    <div class="ContainerTitle sub_title_bg" style="position: relative">
      <span style="position: absolute; left: 1rem">{{ left }}</span>
      <div class="title-icon-left"></div>
      <span>{{ title }}</span>
      <div class="title-icon-right"></div>

      <!-- 添加下拉框插槽 -->
      <div style="position: absolute; width: 7rem; right: 1rem" class="select">
        <slot name="header-right"></slot>
      </div>
    </div>
    <div class="containerContent">
      <slot></slot>
    </div>
  </div>
</template>
<style scoped>
  .container_bg {
    background-image: url(/src/assets/images/itme_bg.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
  }

  .ContainerTitle {
    display: flex;
    line-height: 3.5vh;
    height: 3.5vh;
    width: 100%;
    font-family: 等线;
    font-size: 1.7vh;
    background-size: 20px;
    align-items: center;
    justify-content: center;
  }

  .ContainerTitle span {
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bolder;
  }

  .sub_title_bg {
    background-image: url(/src/assets/images/sub_title_bg.png);
    background-size: 100% 100%;
  }

  .title-icon-left {
    margin-right: 1vw;
    transform: rotateY(180deg);
    width: 2vw;
    height: 3vh;
    background-image: url(/src/assets/images/title-icon-right.png);
    background-size: 100% 100%;
  }

  .title-icon-right {
    margin-left: 1vw;
    width: 2vw;
    height: 3vh;
    background-image: url(/src/assets/images/title-icon-right.png);
    background-size: 100% 100%;
  }

  .containerContent {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .select {
    .el-select {
      .el-input_wrapper {
        background-color: transparent !important;
        background: transparent !important;
      }

      :deep(el-input__inner) {
        background-color: transparent !important;
        background: transparent !important;
        color: white;
      }
      :deep(el-input_wrapper) {
        background-color: transparent !important;
      }

      :deep(.el-select:hover:not(.el-select--disabled).el-input__wrapper) {
        background: transparent !important;
        background-color: transparent !important;
      }
      :deep(.el-select.el-input__wrapper) {
        background: transparent !important;
      }
      :deep(.el-input__suffix) {
        .el-input__suffix-inner {
          .el-icon-arrow-up ::before {
            color: white;
          }
        }
      }
    }
  }
</style>
